<template>
    <div class="right-menu-container">
        <el-dropdown trigger="click" class="right-menu-dropdown" @command="handleCommand">
            <span class="el-dropdown-link">
                <img class="right-menu-avatar" src="@/assets/avatar.gif">
                <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>用户名</el-dropdown-item>
                <el-dropdown-item divided>个人资料</el-dropdown-item>
                <el-dropdown-item command="/" divided>退出</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</template>

<script>
export default {
    methods: {
        handleCommand(path) {
            // this.$router.push({ path });
            location.replace("/")
            setTimeout(() => {
               location.reload(); 
            }, 200);
        },
    },
};
</script>
<style scoped>
.right-menu-container {
    position: absolute;
    right: 0;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.right-menu-dropdown {
    height: 80%;
    cursor: pointer;
}
.right-menu-avatar {
    height: 100%;
    border-radius: 10px;
}
</style>